<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { getWeatherIconByName, initGetWeatherInfo } from '@/utils/getWeather'
import type { IconNames, WeatherData, WeatherInfo } from '@/types/base'
import MiniIcon from '@/components/Icon/MiniIcon.vue'
defineOptions({
  name: 'FullPageWeather',
})
const props = withDefaults(
  defineProps<{
    apiType?: 'gaode' | 'xinzhi' | 'hefeng' | 'openWeather'
  }>(),
  {
    apiType: 'gaode',
  },
)
console.log(props)
const nowLatitude = ref(0)
const nowLongitude = ref(0)
const nowWeather = ref<WeatherData>()
const todayWeather = ref<WeatherInfo>()
onMounted(() => {
  initGetWeatherInfo().then((res) => {
    const { latitude, longitude,weatherData } = res
    nowLatitude.value = latitude;
    nowLongitude.value = longitude;
    console.log('获取结果',res)
    nowWeather.value = weatherData
    todayWeather.value = nowWeather.value?.now
  })
})

const iconName = computed(()=> getWeatherIconByName(nowWeather.value?.now?.weather || ''))
const nightIconName = computed(()=> getWeatherIconByName(nowWeather.value?.now?.nightWeather || ''))
watch(
  iconName,
  (iconName:IconNames):void=> {
    console.log(iconName)
  }
,{})
</script>
<template>
  <div class="weather-container">
    <div class="content-today">
      <div class="content-item">
        <span>日间</span>
        <div class="content-weather">
          <MiniIcon :icon-name="iconName"></MiniIcon>
          <span>{{ todayWeather?.weather}}</span>
        </div>
      </div>
      <div class="content-item">
        <span>夜间</span>
        <div class="content-weather">
          <MiniIcon :icon-name="nightIconName"></MiniIcon>
          <span>{{ todayWeather?.nightWeather}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.weather-container{
  width: 64%;
  min-width: 800px;
  background: #fffdef;
  margin: 1% auto;
  .content-today{
    display: flex;
    justify-content: space-around;
    align-items: center;
    .content-item{
      display: flex;
      align-items: center;
      .content-weather{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
}
</style>
